<template>
	<view class="content">
		<u-tabs :list="tabsList" @click="click" :scrollable="false"  lineColor="#FFCB71"></u-tabs>
		<goodsVideoList v-if="current==0" :goodsList="goodsList" :scrollHeight="`100vh`" />

		<view class="flowList" v-else>
			<my-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="videoBox(item.id)">
						<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
						<image :showLoading="true" :src="item.images" mode="widthFix"></image>
						<view class="demo-title">
							{{item.title}}
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index"
						@click="videoBox(item.id)">
						<image :showLoading="true" :src="item.images" mode="widthFix"></image>
						<view class="demo-title">
							{{item.title}}
						</view>
					</view>
				</template>
			</my-waterfall>
		</view>
	</view>
</template>

<script>
	import goodsVideoList from '@/components/goodsVideoList/goodsVideoList.vue'
	export default {
		components: {
			goodsVideoList
		},
		data() {
			return {
				tabsList: [{
					name: '活动'
				}, {
					name: '视频'
				}],
				goodsList: [],
				flowList:[],
				page: 1,
				type: 1,
				current: 0
			}
		},
		onLoad(e) {
			this.type = e.type
			uni.setNavigationBarTitle({
				title: e.type == 1 ? '收藏列表' : '足迹列表'
			})
			this.upData()
		},
		methods: {
			click(e) {
				this.current = e.index
				this.goodsList=[]
				if (e.index) {
					let url='home/user/video_collect'
					if(this.type==2){
						url='home/user/video_trace'
					}
					this.$myRuquest(url).then(res => {
						let flowList = []
						res.data.data.forEach(item => {
							flowList.push({
								...item.video,
								time: item.time,
								type: item.type,
								collect_id: item.collect_id,
								user_collect:1
							})

						})
						this.flowList = flowList
					})
					
					
				} else {
					this.upData()
				}



			},
			videoBox(id) {
				uni.navigateTo({
					url: '/pages/index_/videoBox/videoBox?id=' + id + '&type=99'
				})
			},
			upData() {
				let url = 'home/user/collect_list'
				if (this.type == 2) url = 'home/user/trace_list'
				this.$myRuquest(url, {
					page: this.page,
					num: 100
				}).then(res => {
					let goodsList = []
					res.data.list.forEach(item => {
						goodsList.push({
							...item.list,
							time: item.time,
							type: item.type,
							collect_id: item.collect_id
						})

					})

					this.goodsList = goodsList
				})
			},
			upVideo() {
				// this.$refs.uWaterfall.clear();
				// this.$myRuquest('home/user/collect_save').then(res=>{
				// 		this.flowList=res.data;
				// })
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 30upx;
	}

	.flowList {
		padding-bottom: 100rpx;
	}

	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		box-shadow: 2rpx 2rpx 6rpx #dedede;
		padding: 8px;
		position: relative;

		image {
			width: 100%;
		}
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: #333333;
	}
</style>
